<template>
  <div class="app-container home">
    <el-row :gutter="24" class="main-header">
      <el-col :sm="24" :lg="16">
        <h1 class="main-title">视频网站后台管理系统</h1>
        <p class="main-desc">
          本系统为视频网站提供高效、便捷的后台管理能力，支持用户、视频、分类、评论、标签、角色权限等全流程管理，助力内容安全与运营效率提升。
        </p>
        <el-tag type="success" effect="plain" class="main-version">当前版本：v{{ version }}</el-tag>
      </el-col>
      <el-col :sm="24" :lg="8" class="main-logo">
        <img src="/favicon.ico" alt="logo" style="width:80px;height:80px;border-radius:16px;box-shadow:0 2px 8px #eee;" />
      </el-col>
    </el-row>

    <el-divider />

    <el-row :gutter="20" class="quick-entry">
      <el-col :sm="12" :md="6">
        <el-card shadow="hover" class="entry-card" @click="goTarget('/system/user')">
          <div class="entry-icon user" />
          <div class="entry-title">用户管理</div>
          <div class="entry-desc">用户信息、角色分配、权限管理</div>
        </el-card>
      </el-col>
      <el-col :sm="12" :md="6">
        <el-card shadow="hover" class="entry-card" @click="goTarget('/system/video')">
          <div class="entry-icon video" />
          <div class="entry-title">视频管理</div>
          <div class="entry-desc">视频内容、审核、上下架</div>
        </el-card>
      </el-col>
      <el-col :sm="12" :md="6">
        <el-card shadow="hover" class="entry-card" @click="goTarget('/system/category')">
          <div class="entry-icon category" />
          <div class="entry-title">分类管理</div>
          <div class="entry-desc">视频分类维护</div>
        </el-card>
      </el-col>
      <el-col :sm="12" :md="6">
        <el-card shadow="hover" class="entry-card" @click="goTarget('/system/comment')">
          <div class="entry-icon comment" />
          <div class="entry-title">评论管理</div>
          <div class="entry-desc">评论内容、审核、删除</div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />

    <el-row :gutter="24">
      <el-col :sm="24" :lg="12">
        <h3>项目简介</h3>
        <ul class="feature-list">
          <li>✔️ 支持用户、角色、权限、菜单的灵活配置</li>
          <li>✔️ 视频内容上传、分类、标签、审核全流程</li>
          <li>✔️ 评论、点赞、收藏等互动功能管理</li>
          <li>✔️ 数据统计与安全审计</li>
          <li>✔️ 基于Vue3 + Element Plus + SpringBoot + MyBatis-Plus</li>
        </ul>
      </el-col>
      <el-col :sm="24" :lg="12">
        <h3>技术栈</h3>
        <el-row>
          <el-col :span="12">
            <b>后端：</b>
            <ul>
              <li>SpringBoot</li>
              <li>Spring Security</li>
              <li>JWT</li>
              <li>MyBatis-Plus</li>
              <li>Druid</li>
              <li>Fastjson</li>
            </ul>
          </el-col>
          <el-col :span="12">
            <b>前端：</b>
            <ul>
              <li>Vue3</li>
              <li>Element Plus</li>
              <li>Pinia/Vuex</li>
              <li>Axios</li>
              <li>Sass</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const version = ref('3.8.9')
const router = useRouter()
function goTarget(path) {
  router.push(path)
}
</script>

<style scoped lang="scss">
.home {
  .main-header {
    align-items: center;
    margin-bottom: 10px;
  }
  .main-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 8px;
  }
  .main-desc {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 8px;
  }
  .main-version {
    margin-top: 8px;
  }
  .main-logo {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .quick-entry {
    margin-bottom: 20px;
    .entry-card {
      cursor: pointer;
      text-align: center;
      border-radius: 12px;
      transition: box-shadow 0.2s;
      .entry-icon {
        width: 48px;
        height: 48px;
        margin: 16px auto 8px auto;
        background-size: contain;
        background-repeat: no-repeat;
        &.user { background-image: url('/favicon.ico'); }
        &.video { background-image: url('https://img.icons8.com/color/48/000000/video.png'); }
        &.category { background-image: url('https://img.icons8.com/color/48/000000/folder-invoices.png'); }
        &.comment { background-image: url('https://img.icons8.com/color/48/000000/comments.png'); }
      }
      .entry-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 4px;
      }
      .entry-desc {
        font-size: 0.95rem;
        color: #888;
        margin-bottom: 8px;
      }
      &:hover {
        box-shadow: 0 4px 16px #e6f7ff;
      }
    }
  }
  .feature-list {
    margin: 0 0 10px 0;
    padding: 0 0 0 18px;
    font-size: 1rem;
    color: #444;
    li { margin-bottom: 6px; }
  }
}
</style>

